<template>
  <section>
    <el-row>
      <el-card>
        <el-col :span="24">
          <div class="table_content">
            <el-row :gutter="4">
              <el-form inline label-position="left" class="demo-form-inline">
                <el-form-item label="手机号:">
                  <el-input
                    class="mr5"
                    v-model="searchViewDto.mobile"
                    placeholder="请输入接收人手机号"
                  ></el-input>
                </el-form-item>
                <el-form-item label="时间:">
                  <el-date-picker
                    class="mr5"
                    v-model="value5"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  ></el-date-picker>
                </el-form-item>
                <el-form-item>
                  <el-button
                    icon="el-icon-search"
                    type="primary"
                    @click="searchView"
                    >查询
                  </el-button>
                </el-form-item>
                <el-form-item>
                  <el-button
                    icon="el-icon-s-open"
                    type="primary"
                    @click="clearView"
                  >
                    重置
                  </el-button>
                </el-form-item>
                <el-form-item>
                  <el-button
                    icon="fa fa-backward"
                    type="primary"
                    @click="handleBack"
                  >
                    返回
                  </el-button>
                </el-form-item>
              </el-form>
              <page-table
                ref="multipleSelection"
                :page-data="pageData"
                :loading="loading"
                :do-get-page-data="getPageData"
              >
                <el-table-column
                  type="index"
                  width="100px"
                  align="center"
                  label="序号"
                ></el-table-column>
                <el-table-column
                  prop="content"
                  label="内容"
                  width="270"
                  align="center"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  label="模块"
                  prop="module"
                  align="center"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.module | keyText("MODULE") }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="receiverUserName"
                  label="接收人"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="receiverMobile"
                  label="接收手机号"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="createTime"
                  label="发送时间"
                  width="200"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="status"
                  label="是否提交接口"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span>{{
                      scope.row.status | keyText("SMS_HISTORY_STATUS")
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="channel" label="短信通道" align="center">
                  <template slot-scope="scope">
                    <span>{{
                      scope.row.channel | keyText("SMS_CHANNEL")
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="result" label="发送结果" align="center">
                  <template slot-scope="scope">
                    <span>{{
                      scope.row.result === "SUCCESS" ? "成功" : "失败"
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="reason"
                  label="失败原因"
                  align="center"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  prop="needReply"
                  label="是否需要回复"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.needReply ? "是" : "否" }}</span>
                  </template>
                </el-table-column>
              </page-table>
            </el-row>
          </div>
        </el-col>
      </el-card>
    </el-row>
  </section>
</template>
<script>
import Moment from "moment";

export default {
  created() {
    this.getPageData(1);
  },
  data() {
    return {
      searchViewDto: {
        pageIndex: 1,
        pageSize: 10,
        smsId: this.$route.query.id,
        batchId: "",
        department: "",
        keywords: "",
        receiver: "",
        mobile: "",
        sender: "",
        module: "",
        channel: "",
        sendWay: "",
        needReply: "",
        replyStatus: "",
        relationId: "",
        startTime: "",
        endTime: ""
      },
      moduleTypes: this.getDictionary("MODULE"),
      value5: [],
      pageData: {},
      loading: false
    };
  },
  watch: {
    $route(to, from) {
      if (this.$route.query.id) {
        this.getPageData(1);
      }
    }
  },
  methods: {
    searchView() {
      this.getPageData();
    },
    handleBack() {
      this.$router.go(-1);
    },
    clearView() {
      this.searchViewDto = {
        pageIndex: 1,
        pageSize: 10,
        smsId: this.$route.query.id,
        batchId: "",
        department: "",
        keywords: "",
        receiver: "",
        mobile: "",
        sender: "",
        module: "",
        channel: "",
        sendWay: "",
        needReply: "",
        replyStatus: "",
        relationId: "",
        startTime: "",
        endTime: ""
      };
      this.value5 = [];
      this.getPageData();
    },
    getPageData(val) {
      this.searchViewDto.startTime = "";
      this.searchViewDto.endTime = "";
      if (this.value5 && this.value5.length > 0) {
        this.searchViewDto.startTime = Moment(this.value5[0]).format(
          "YYYY-MM-DD"
        );
        this.searchViewDto.endTime = Moment(this.value5[1]).format(
          "YYYY-MM-DD"
        );
      }
      let tem = Object.assign(this.searchViewDto, val);
      delete tem.needReply // 去除需要回复字段
      this.API.getSmsHistoryPageList(tem).then(ret => {
        this.pageData = ret.data;
      });
    }
  }
};
</script>
<style scoped></style>
